<template>
  <div class="channel-index">
    <channel-style :styles="channelStyles">
      <div class="channel-index__left" slot="channel-left">
        <channel-tree :model="treeData"/>
      </div>
      <div class="channel-index__middle" slot="channel-middle">
        <span>栏目中间部分</span>
      </div>
      <div class="channel-index__right" slot="channel-right">
        <channel-message />
      </div>
    </channel-style>
  </div>
</template>

<script>
import { Channels } from '@/common/'
import ChannelTree from '@/component/channel/channel-tree/channel-tree'
import ChannelStyle from '@/component/channel/channel-style/channel-style'
import ChannelMessage from '@/component/channel/channel-message/channel-message'

export default {
  name: 'channel-index',
  data () {
    return {
      treeData: {},
      channelStyles: [
        { width: '262px', slot: 'channel-left' },
        // { width: '100%', slot: 'channel-middle' },
        { width: '100%', slot: 'channel-right' }
      ]
    }
  },
  components: {
    ChannelTree,
    ChannelStyle,
    ChannelMessage
  },
  computed: {
  },
  mounted () {
    this.start()
  },
  destroyed () {
    this.stop()
  },
  methods: {
    start () {
      this.resetTree()
      this.resetStyles()
    },
    stop () {
    },
    resetTree () {
      const parseNode = function (data) {
        var result = null
        if (data && data.sid) {
          result = {
            name: data.sid.strName || '',
            userCount: data.sid.dwInnerUserCount || 0,
            id: data.sid.dwSid || 0,
            children: []
          }
          if (data.subObj) {
            var index = 0
            for (; index < data.subObj.length; ++index) {
              var node = data.subObj[index]
              node = node && parseNode(node)
              node && result.children.push(node)
            }
          }
        }
        return result
      }

      const treeInfo = Channels.impl().treeInfo()
      this.treeData = parseNode(treeInfo) || {}
    },
    resetStyles () {
      const ssid = Channels.impl().ssid()
      const currentInfo = Channels.impl().treeInfo(ssid)
      const style = (currentInfo && currentInfo.sid && currentInfo.sid.btStyle) || 0

      const styles = []
      styles.push({ width: '262px', slot: 'channel-left' })
      switch (style) {
        case 2: styles.push({ width: '100%', slot: 'channel-middle' }); break
      }
      styles.push({ width: '100%', slot: 'channel-right' })
      this.channelStyles = styles
    }
  }
}
</script>

<style lang="scss">
@import "~@/css/common/_variables";
@import "~@/css/lib/_mixin";

.channel-index {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: row;
  &__left {
    height: 100%;
    min-width: 262px;
    border-right: 2px solid #dfeef9;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    overflow-x: hidden;
    overflow-y: auto;
  }
  &__middle {
    height: 100%;
    border-right: 1px solid #e3e3e3;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
  &__right {
    height: 100%;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
  }
}
</style>
